<template>
  <jcx-form-table v-model="props.sysColumnVoList" :drag-sort="true" :add-template="addTemplate">
    <el-table-column label="字段列名" align="center" prop="name" :show-overflow-tooltip="true"
                     width="80"></el-table-column>
    <el-table-column label="字段描述" align="center">
      <template #default="scope">
        <el-input v-model="scope.row.comment"></el-input>
      </template>
    </el-table-column>
    <el-table-column label="物理类型" align="center" prop="columnType" :show-overflow-tooltip="true"
                     width="80"></el-table-column>
    <el-table-column label="Java类型" align="center">
      <template #default="scope">
        <el-select :disabled="scope.row.isPrimaryKey" v-model="scope.row.javaType">
          <el-option label="Long" value="Long"/>
          <el-option label="String" value="String"/>
          <el-option label="Integer" value="Integer"/>
          <el-option label="Double" value="Double"/>
          <el-option label="BigDecimal" value="BigDecimal"/>
          <el-option label="Date" value="Date"/>
          <el-option label="Boolean" value="Boolean"/>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="Java属性" align="center">
      <template #default="scope">
        <el-input :disabled="scope.row.isPrimaryKey" v-model="scope.row.javaField"></el-input>
      </template>
    </el-table-column>
    <!--
    <el-row-column label="主键" align="center" width="50">
      <template #lay-default="scope">
        <el-checkbox :true-label="true" :false-label="false" v-model="scope.row.isPrimaryKey"></el-checkbox>
      </template>
    </el-row-column>
    <el-row-column label="主键自增" align="center" width="50">
      <template #lay-default="scope">
        <el-checkbox :true-label="true" :false-label="false" v-model="scope.row.isIncrement"></el-checkbox>
      </template>
    </el-row-column>
    -->
    <el-table-column label="是否必填" align="center" width="50">
      <template #default="scope">
        <el-checkbox :disabled="scope.row.isPrimaryKey" :true-label="true" :false-label="false"
                     v-model="scope.row.isRequired"></el-checkbox>
      </template>
    </el-table-column>
    <el-table-column label="是否唯一" align="center" width="50">
      <template #default="scope">
        <el-checkbox :disabled="scope.row.isPrimaryKey" :true-label="true" :false-label="false"
                     v-model="scope.row.isUnique"></el-checkbox>
      </template>
    </el-table-column>
    <el-table-column label="插入" align="center" width="50">
      <template #default="scope">
        <el-checkbox :disabled="scope.row.isPrimaryKey" :true-label="true" :false-label="false"
                     v-model="scope.row.isInsert"></el-checkbox>
      </template>
    </el-table-column>
    <el-table-column label="编辑" align="center" width="50">
      <template #default="scope">
        <el-checkbox :disabled="scope.row.isPrimaryKey" :true-label="true" :false-label="false"
                     v-model="scope.row.isEdit"></el-checkbox>
      </template>
    </el-table-column>
    <el-table-column label="列表" align="center" width="50">
      <template #default="scope">
        <el-checkbox :disabled="scope.row.isPrimaryKey" :true-label="true" :false-label="false"
                     v-model="scope.row.isList"></el-checkbox>
      </template>
    </el-table-column>
    <el-table-column label="查询" align="center" width="50">
      <template #default="scope">
        <el-checkbox :disabled="scope.row.isPrimaryKey" :true-label="true" :false-label="false"
                     v-model="scope.row.isQuery"></el-checkbox>
      </template>
    </el-table-column>
    <el-table-column label="查询方式" align="center">
      <template #default="scope">
        <el-select :disabled="scope.row.isPrimaryKey" v-model="scope.row.queryType">
          <el-option label="=" value="EQ"/>
          <el-option label="!=" value="NE"/>
          <el-option label=">" value="GT"/>
          <el-option label=">=" value="GTE"/>
          <el-option label="<" value="LT"/>
          <el-option label="<=" value="LTE"/>
          <el-option label="LIKE" value="LIKE"/>
          <el-option label="IN" value="IN"/>
          <el-option label="BETWEEN" value="BETWEEN"/>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="显示类型" align="center">
      <template #default="scope">
        <el-select :disabled="scope.row.isPrimaryKey" v-model="scope.row.htmlType">
          <el-option label="文本框" value="input"/>
          <el-option label="文本域" value="textarea"/>
          <el-option label="下拉框" value="select"/>
          <el-option label="按钮" value="switch"/>
          <el-option label="单选框" value="radio"/>
          <el-option label="复选框" value="checkbox"/>
          <el-option label="日期控件" value="datetime"/>
          <el-option label="图片上传" value="imageUpload"/>
          <el-option label="文件上传" value="fileUpload"/>
          <el-option label="富文本控件" value="editor"/>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="字典类型" align="center">
      <template #default="scope">
        <el-select :disabled="scope.row.isPrimaryKey" v-model="scope.row.dictCode" clearable filterable
                   placeholder="请选择">
          <el-option
              v-for="dict in dictList"
              :key="dict.id"
              :label="dict.name"
              :value="dict.code">
            <span style="float: left">{{ dict.name }}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.code }}</span>
          </el-option>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="布局类型" align="center">
      <template #default="scope">
        <el-select :disabled="scope.row.isPrimaryKey" v-model="scope.row.layoutType">
          <el-option label="行占比100%" value="24"/>
          <el-option label="行占比50%" value="12"/>
          <el-option label="行占比33%" value="8"/>
          <el-option label="行占比25%" value="6"/>
        </el-select>
      </template>
    </el-table-column>
    <!--
    <el-row-column label="备注" align="center">
      <template #lay-default="scope">
        <el-input type="textarea" v-model="scope.row.remark" clearable placeholder="请输入备注"></el-input>
      </template>
    </el-row-column>
    -->
  </jcx-form-table>
</template>

<script setup>
import {onMounted, ref} from "vue";
import dictTypeApi from "@/api/system/type";

const props = defineProps({
  sysColumnVoList: {
    type: Array,
    default: []
  }
})
const addTemplate = ref({
  id: '',
  tableId: '',
  name: '',
  comment: '',
  columnType: '',
  javaType: '',
  javaField: '',
  isPrimaryKey: '',
  isIncrement: '',
  isRequired: '',
  isUnique: '',
  isInsert: '',
  isEdit: '',
  isList: '',
  isQuery: '',
  queryType: '',
  htmlType: '',
  layoutType: '',
  dictCode: '',
  remark: '',
  sort: 0
});
const dictList = ref([]);

onMounted(() => {
  dictTypeApi.lists.get({enabled: true}).then(response => {
    dictList.value = response.data.list;
  })
});
</script>
